import styled from "@emotion/styled"
import { useAtom } from "jotai"
import { earningsBtnStateAtom, EarningsButtonAtom } from "../atom"
import { SvgComponent } from "@/components/base/Svg"

interface EarningsButtonProps {
    color: string
    borderColor: string
    icon?: React.ReactNode | string | null
    name: string
    balance: string
    onClick?: () => void
}

interface ButtonContainer {
    color: string
    borderColor: string
}

const EarningsButtonContainer = styled.div<ButtonContainer>`
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 159rem;
    height: 64rem;
    background: ${(props) => props.color};
    border: 1px solid ${(props) => props.borderColor};
    border-radius: 8rem;
    padding: 12rem 16rem;
    cursor: pointer;
    &:first-of-type {
        margin-right: 11rem;
    }
`

const LeftContent = styled.div`
    display: flex;
    flex-direction: column;
`
const EarningsLine = styled.div`
    display: flex;
    align-items: center;
    width: 95rem;
`
const BalanceText = styled.div`
    font-family: Gilroy;
    font-weight: 700;
    font-size: 18rem;
`

const EarningsName = styled.div`
    font-family: Gilroy;
    font-weight: 500;
    font-size: 12rem;
`

const EarningsIcon = styled.img`
    width: 40rem;
    height: 40rem;
`

const ArrowIcon = styled(SvgComponent("pages/UserCenterPage/right_arrow1.svg"))`
    width: 16rem;
    height: 16rem;
    margin-left: 3rem;
`

const EarningsButton: React.FC<EarningsButtonProps> = ({
    color,
    borderColor,
    icon,
    name,
    balance,
    onClick,
}) => {
    const [buttonState, setButtonState] = useAtom(earningsBtnStateAtom)
    const [buttons] = useAtom(EarningsButtonAtom)

    const renderIcon = () => {
        if (typeof icon === "string") {
            return <EarningsIcon src={icon} />
        }
        if (typeof icon === "object" && icon !== null) {
            return icon as React.ReactElement
        }
        return null
    }
    const handleClick = () => {
        setButtonState({ name, clicked: true })
        console.log(`${name} button clicked!`)
    }

    return (
        <EarningsButtonContainer
            color={color}
            borderColor={borderColor}
            onClick={handleClick}
        >
            <LeftContent>
                <BalanceText>{balance}</BalanceText>
                <EarningsLine>
                    <EarningsName>{name}</EarningsName>
                    <ArrowIcon />
                </EarningsLine>
            </LeftContent>
            {renderIcon()}
        </EarningsButtonContainer>
    )
}

export default EarningsButton
